vue 的简介 MVVM和虚拟DOM

您所在的位置：网站首页 › 虚拟dom 微型框架 › vue 的简介 MVVM和虚拟DOM

vue 的简介 MVVM和虚拟DOM

2024-01-21 14:46| 来源: 网络整理| 查看: 265

1、渐进式框架Vue

Vue是构建用户界面的渐进式框架，只关注视图层（view）；

2、vue中两个核心点响应的数据绑定(双向绑定):当数据发生改变，自动更新视图。内部利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作。由于Object.definedProperty不兼容IE8浏览器，所以Vue不兼容IE8及以下浏览器。组合的视图组件：ui页面映射为组件树；划分组件可维护、可重用、可测试。在这里插入图片描述

3、虚拟DOM

运行js的速度是很快的，大量的操作DOM就会很慢。时常在更新数据后会重新渲染页面，这样造成在没有改变数据的地方也重新渲染了DOM节点，这样造成了很大程度上的资源浪费。利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。在这里插入图片描述

首先是html模板/字符串模板/render函数创建出来的模板，进行编译，调用Render函数，把模板中的元素抽离出来，形成一个虚拟DOM树，然后创建好真实的DOM树，最后呈现在页面中。在这里插入图片描述

当数据发生改化时，能够智能地计算(DIFF算法)出重新渲染组件的最小代价并应用到DOM操作上。 4、MVVM模式 M：Model -> 数据模型V：view -> 视图模板vm：view-Model -> 视图模型在这里插入图片描述

核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

View 用来把数据以某种方式呈现给用户。 Model 其实就是数据。 Controller 接收并处理来自用户的请求，并将 Model返回给用户。

MVVM 由 Model,View,ViewModel 三部分构成，

Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

在这里插入图片描述

Observer 数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用Object.defineProperty的getter和setter来实现。Compile 指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。Watcher 订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。Dep 消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify 函数，再调用订阅者的 update 方法。解释：从图中可以看出，当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；另一方面，Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析，初始化视图，并订阅Watcher 来更新视图，此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

【本文地址】

vue 的简介 MVVM和虚拟DOM

vue 的简介 MVVM和虚拟DOM

今日新闻

推荐新闻